<template>
    <div class="submit">
        <b-modal id="modal-submit" ref="modal-submit" title="提交博客">
            <p class="my-4">请选择文章的标签(至少一个)：</p>
            <b-button class="badge m-2" ref="b-badge" @click="selectBadge(index,item.tag)" v-for="(item, index) in $store.state.tags.tags" :key="index" variant="Light border">{{item.tag}}</b-button>

            <template v-slot:modal-footer>
                <b-button>返回</b-button>
                <b-button variant="success" @click="articleSubmit()">确定提交</b-button>
            </template>
        </b-modal>
    </div>
</template>

<script>
import Axios from 'axios';
import store from '@/store/index.js'
import { createdArtcile } from '@/../api/api.js'
export default {
    data() {
        return {
            article,
            articleTags:" ",
        }
    },
    methods: {
        changeSubmit(opt,article) {
            if(opt == "open") {
                this.article = article;
                this.$refs['modal-submit'].show();
            }else if(opt == "close") {
                this.$refs['modal-submit'].hide();
            }else {
                throw "没有此配置！！"
            }
        },
        selectBadge(index,tags) {
            if(this.$refs['b-badge'][index].style.color != "rgb(255, 255, 255)") {
                this.$refs['b-badge'][index].style.backgroundColor = "#007bff";
                this.$refs['b-badge'][index].style.color = "#fff";
                this.articleTags = '['+tags+']'+this.articleTags;
            }
            else {
                this.$refs['b-badge'][index].style.backgroundColor = "";
                this.$refs['b-badge'][index].style.color = "";
                let reg = new RegExp('['+tags+']','gi');
                this.articleTags = this.articleTags.replace(reg,"");
            }
        },
        articleSubmit() {
            if (this.article.content.length >=10 && this.article.title.length > 0) {
                let reg = new RegExp('undefined','gi');
                this.articleTags = this.articleTags.replace(reg,"");
                Axios.post(createdArtcile,{
                    article: this.article,
                    articleTags: this.articleTags,
                })
                .then(Response => {
                    if (Response.data.message == 'success') {
                        window.alert('提交成功！');
                        this.$refs['modal-submit'].hide();
                        store.commit('upAmount');
                        this.$parent.article = {
                            title:"",
                            content:""
                        };
                        this.$parent.file2 = [];
                        this.$router.push({
                            path:'/personalblog'
                        });
                    }
                })
                .catch(err => {
                    window.alert('提交失败！');
                    console.log(err);
                });   
            }
            else {
                window.alert("请完成博客内容后在提交！");
                this.$refs['modal-submit'].hide();
            }
            
        },
    }
}
</script>

<style lang="stylus" scoped>
.badge
    font-size 16px
    height 32px
    font-weight 400
</style>